<template>
	
	<div class="main-content">
      <h1 class="page-header">已获佣金合计：<strong>{{changeToDecimal(indexBasic.commissionTotol,2)}}</strong>元</h1>
      <div class="presentation-data row">
        <div class="col-lg-3 col-md-6" v-if="isAdmin">
          <div class="presentation-data-list">
            <div class="presentation-data-content">
              <h3 class="presentation-title">经纪人</h3>
              <p class="data-number">{{indexBasic.brokersNumber}}</p>
            </div>
          </div>
        </div>
        <div class="col-lg-3 col-md-6">
          <div class="presentation-data-list">
            <div class="presentation-data-content">
              <h3 class="presentation-title">成交量</h3>
              <p class="data-number">{{indexBasic.volume}}</p>
            </div>
          </div>
        </div>
        <div class="col-lg-3 col-md-6">
          <div class="presentation-data-list">
            <div class="presentation-data-content">
              <h3 class="presentation-title">报备数</h3>
              <p class="data-number">{{indexBasic.reportNumber}}</p>
            </div>
          </div>
        </div>
        <div class="col-lg-3 col-md-6">
          <div class="presentation-data-list">
            <div class="presentation-data-content">
              <h3 class="presentation-title">成交率</h3>
              <p class="data-number">{{indexBasic.turnoverRate}}% </p>
            </div>
          </div>
        </div>
      </div>
      <div class="presentation-data row" v-if="isAdmin">
        <div class="col-sm-12 col-lg-4">
          <div class="presentation-data-header bgcol01">
            <div class="array-title-left">
              <i class="fa fa-money"></i><strong>佣金</strong>
            </div>
           <div class="array-list-right">
              <div class="dropdown clearfix">
                <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="bgcol01">{{commissionText}}
                 <i class="fa fa-angle-down"></i>
                </button>
                <ul class="dropdown-menu choice-list" role="menu" aria-labelledby="dLabel" style="left: 39px;">
                	<li v-for="(row, index) in dateQueryList" v-on:click="commissionQuery(no,row)">{{row}}</li>
                </ul>
              </div>
            </div>
            
            <!-- 下三角标签 -->
            <i class="fa fa-caret-down down-triangle"></i>
          </div>
          <ul class="presentation-array-list" id="commissionModelUl">
            <li v-for="(row, index) in commissionModelList">
              <div class="array-list-left">
                <span class="rank bgcol01">{{row.renkNo}}</span>{{row.rankName}}
              </div>
              <div class="array-list-right ellipsis">{{row.money}}元</div>
            </li>
            
          </ul>
          <div class="more-ranking" style="display: none;" id="addCommissionModelUl" >
              <a v-on:click="initLi(null,1)"><i class="fa fa-plus"></i>更多</a>
          </div>
        </div>
        <div class="col-sm-12 col-lg-4">
          <div class="presentation-data-header bgcol02">
            <div class="array-title-left">
              <i class="fa fa-bar-chart"></i><strong>成交量</strong>
            </div>
            <div class="array-list-right">
              <div class="dropdown clearfix">
                <button id="dLabel2" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="bgcol02">{{volumeText}}
                 <i class="fa fa-angle-down"></i>
                </button>
                <ul class="dropdown-menu choice-list" role="menu" aria-labelledby="dLabel2" style="left: 39px;">
                  <li v-for="(row, index) in dateQueryList" v-on:click="volumeQuery(index,row)">{{row}}</li>
                </ul>
              </div>
            </div>
            <!-- 下三角标签 -->
            <i class="fa fa-caret-down down-triangle"></i>
          </div>
          <ul class="presentation-array-list">
            <li v-for="(row, index) in volumeModelList">
              <div class="array-list-left">
                <span class="rank bgcol02">{{row.renkNo}}</span>{{row.rankName}}
              </div>
              <div class="array-list-right ellipsis">{{row.money}}套</div>
            </li>
            
          </ul>
          <div class="more-ranking" id="volumeModelUl">
               <a v-on:click="initLi(null,2)"><i class="fa fa-plus"></i>更多</a>
          </div>
        </div>
        <div class="col-sm-12 col-lg-4">
          <div class="presentation-data-header bgcol03">
            <div class="array-title-left">
              <i class="fa fa-pie-chart"></i><strong>报备数</strong>
            </div>
            <div class="array-list-right">
              <div class="dropdown clearfix">
                <button id="dLabel3" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="bgcol03">{{reportText}}
                 <i class="fa fa-angle-down"></i>
                </button>
                <ul class="dropdown-menu choice-list" role="menu" aria-labelledby="dLabel3" style="left: 39px;">
                   <li v-for="(row, index) in dateQueryList" v-on:click="reportQuery(index,row)">{{row}}</li>
                </ul>
              </div>
            </div>
            <!-- 下三角标签 -->
            <i class="fa fa-caret-down down-triangle"></i>
          </div>
          <ul class="presentation-array-list">
            <li v-for="(row, index) in reportModelList">
              <div class="array-list-left">
                <span class="rank bgcol03">{{row.renkNo}}</span>{{row.rankName}}
              </div>
              <div class="array-list-right ellipsis">{{row.money}}次</div>
            </li>
            
          </ul>
          <div class="more-ranking" id="reportModelUl">
              <a v-on:click="initLi(null,3)"><i class="fa fa-plus"></i>更多</a>
          </div>
        </div>
      </div>
    </div>  
</template>

<script>
	export default {
		data() {
			return {
				indexBasic:{},
				commissionModelParams:{
					startIndex:0,
					endIndex:10,
					staffId:window.localStorage.getItem("4_userId"),
					flag:'',
					no:''
				},volumeModelParams:{
					startIndex:0,
					endIndex:10
				},reportModelParams:{
					startIndex:0,
					endIndex:10
				},
				commissionModelList:[],
				commissionModelListCopy:[],
				commissionPgeNo:0,
				volumeModelList:[],
				volumeModelListCopy:[],
				volumePgeNo:0,
				reportModelList:[],
				reportModelListCopy:[],
				reportPgeNo:0,
				dateQueryList:[],
				commissionText:'所有',
				volumeText:'所有',
				reportText:'所有',
				isAdmin: false
				
			}
		},
		mounted: function() {
			//初始化
			this.initIndexBasic();
			//佣金排行榜
		//	this.initCommissionModel(1);
			//成交量
			this.initVolume(2);
			//报表数
			this.initReport(3);
			//时间查询
			this.initDateQuery();
			
		},
		methods:{
			initIndexBasic:function(){
				var _self = this;
				var initIndex = {
				}
				var body = {};
				body.params = initIndex;
				var url = this.utilHelper.apiUrl+'/api/getAgencyPcIndex';
				_self.$http.post(url,body).then((response)=>{
					var body = response.body.resData;
					if(body.result==1){
						_self.indexBasic = body.indexBasicDto;
						_self.isAdmin = _self.indexBasic.isAdmin;
					}
				});
			},
			initCommissionModel:function(flag,dateQuery){
				var _self = this;
				 _self.commissionModelParams.flag = 1;
				 _self.commissionModelParams.no = 0;
				_self.initAjax(flag);
			},
			initLi:function(commissionList,flag){ 
				var _self = this;
				if(commissionList==null){
					if(flag==1){ //佣金
						commissionList=_self.commissionModelListCopy;	
					}else if(flag==2){
						commissionList=_self.volumeModelListCopy;
					}else if(flag==3){
						commissionList=_self.reportModelListCopy;
					}
						
				}
				//读取数据开始下标
				var startIndex = null;
				var endIndex = null;
				var totolPage = null;
				var pageNo = null;
				var addDiv = null;
				if(flag==1){
					startIndex=_self.commissionModelParams.startIndex*_self.commissionModelParams.endIndex;
					endIndex=(_self.commissionPgeNo*_self.commissionModelParams.endIndex)+_self.commissionModelParams.endIndex;
				 	totolPage=Math.ceil(commissionList.length/_self.commissionModelParams.endIndex);
				 	pageNo=_self.commissionPgeNo;
				}else if(flag==2){
					startIndex=_self.volumeModelParams.startIndex*_self.volumeModelParams.endIndex;
					endIndex=(_self.volumePgeNo*_self.volumeModelParams.endIndex)+_self.volumeModelParams.endIndex;
				 	totolPage=Math.ceil(commissionList.length/_self.volumeModelParams.endIndex);
				 	pageNo=_self.volumePgeNo;
				}else if(flag==3){
					startIndex=_self.reportModelParams.startIndex*_self.reportModelParams.endIndex;
					endIndex=(_self.reportPgeNo*_self.reportModelParams.endIndex)+_self.reportModelParams.endIndex;
				 	totolPage=Math.ceil(commissionList.length/_self.reportModelParams.endIndex);
				 	pageNo=_self.reportPgeNo;
				}
				//读取数据结束下标
			if(pageNo<=totolPage){
				for(var i=startIndex;i<endIndex;i++){
					if(commissionList[i]!=undefined){
						if(flag==1){
							_self.commissionModelList.push(commissionList[i]);
						}else if(flag==2){
							_self.volumeModelList.push(commissionList[i]);
						}else if(flag==3){
							_self.reportModelList.push(commissionList[i]);
						}
						
					}
				}
				var currerNo = null;
				if(flag==1){
					_self.commissionModelParams.startIndex = startIndex+1;
					_self.commissionPgeNo = pageNo+1;
					currerNo=_self.commissionPgeNo;
					addDiv="addCommissionModelUl";
				}else if(flag==2){
					_self.volumeModelParams.startIndex = startIndex+1;
					_self.volumePgeNo = pageNo+1;
					currerNo=_self.volumePgeNo;
					addDiv="volumeModelUl";
				}else if(flag==3){
					_self.reportModelParams.startIndex = startIndex+1;
					_self.reportPgeNo = pageNo+1;
					currerNo=_self.reportPgeNo;
					addDiv="reportModelUl";
				}
				if(currerNo>=totolPage){
					$("#"+addDiv).hide();
				}else{
					$("#"+addDiv).show();
				}
			}
			},initVolume:function(flag){ //成交量初始化
				 var _self = this;
				 _self.commissionModelParams.flag = 2;
				_self.initAjax(flag);
			},initReport:function(flag){ //报备数
				 var _self = this;
				 _self.commissionModelParams.flag = 3;
				_self.initAjax(flag);
			},initAjax:function(flag){
				var _self = this;
				var req_url = this.utilHelper.apiUrl+'/api/getCommissionModel';
				var body ={};
				body.params = _self.commissionModelParams;
				_self.$http.post(req_url,body).then((response)=>{
					var body = response.body.resData;
					if(body.result==1){
						if(flag==1){ //佣金请求
							_self.commissionModelListCopy = body.resData;
							_self.initLi(body.indexList,flag);
						}else if(flag==2){ //成交量
							_self.volumeModelListCopy = body.resData;
							_self.initLi(body.indexList,flag);
						}else if(flag==3){
							_self.reportModelListCopy = body.resData;
							_self.initLi(body.indexList,flag);
						}
					}
				});
			},initDateQuery:function(){
				var _self = this;
				var url = this.utilHelper.apiUrl+"/common/getEnum/DateToEnum"
				var p={};
				_self.$http.get(url,p).then((response)=>{
					var body = response.body.data;
					_self.dateQueryList = body;
				});
			},commissionQuery:function(queryDate,textValue){
				var _self = this;
				_self.commissionText = textValue;
				_self.commissionModelParams.flag = 1;
				_self.commissionModelParams.no = queryDate;
				_self.commissionModelParams.startIndex = 0;
				_self.commissionModelParams.endIndex = 10;
				_self.commissionPgeNo = 0;
				_self.commissionModelList=[];
				_self.initAjax(1);
			},volumeQuery:function(queryDate,textValue){
				var _self = this;
				_self.volumeText = textValue;
				_self.commissionModelParams.flag = 2;
				_self.commissionModelParams.no = queryDate;
				_self.volumeModelParams.startIndex = 0;
				_self.volumeModelParams.endIndex = 10;
				_self.volumePgeNo = 0;
				_self.volumeModelList=[];
				_self.initAjax(2);
			},reportQuery:function(queryDate,textValue){
				var _self = this;
				_self.reportText = textValue;
				_self.commissionModelParams.flag = 3;
				_self.commissionModelParams.no = queryDate;
				
				_self.reportModelParams.startIndex = 0;
				_self.reportModelParams.endIndex = 10;
				_self.reportPgeNo = 0;
				_self.reportModelList=[];
				_self.initAjax(3);
			},
			changeToDecimal(value, point){
				var f_x = parseFloat(value);
			    if (isNaN(f_x)) {
			       value = "0";
			    }
			    var f_x = Math.round(value * 100) / 100;
			    var s_x = f_x.toString();
			    var pos_decimal = s_x.indexOf('.');
			    if (pos_decimal < 0) {
			        pos_decimal = s_x.length;
			        s_x += '.';
			    }
			    while (s_x.length <= pos_decimal + point) {
			        s_x += '0';
			    }
			    return s_x;
			}
		}
	}
</script>
